import { Tabs } from "expo-router"
import { colors, fontSize } from "@/constants/tokens"
import { BlurView } from "expo-blur"
import { StyleSheet } from 'react-native'
import { FontAwesome, MaterialCommunityIcons, Ionicons, FontAwesome6 } from '@expo/vector-icons';
import { FloatingPlayer } from "@/components/FloatingPlayer";

const TabsNavigation = () => {

	return (
		<>
			<Tabs screenOptions={{
				tabBarActiveTintColor: colors.primary,
				tabBarLabelStyle: {
					fontSize: fontSize.xs,
					fontWeight: "500"
				},
				headerShown: false,
				tabBarStyle: {
					position: 'absolute',
					borderTopLeftRadius: 20,
					borderTopRightRadius: 20,
					borderTopWidth: 0,
					elevation: 0,
					paddingTop: 8

				},
				tabBarBackground: () => <BlurView
					intensity={95}
					style={{
						...StyleSheet.absoluteFillObject,
						overflow: 'hidden',
						borderTopLeftRadius: 20,
						borderTopRightRadius: 20
					}}

				/>
			}}>
				<Tabs.Screen name="favorites" options={{
					title: 'Favorites',
					tabBarIcon: ({ color }) => <FontAwesome name='heart' size={20} color={color} />,
					tabBarLabel: '喜欢'
				}}></Tabs.Screen>
				<Tabs.Screen name="playlists" options={{
					title: 'Playlists',
					tabBarIcon: ({ color }) => <MaterialCommunityIcons name='playlist-play' size={28} color={color} />,
					tabBarLabel: '常听'
				}}></Tabs.Screen>
				<Tabs.Screen name="(songs)" options={{
					title: 'Songs',
					tabBarIcon: ({ color }) => <Ionicons name='musical-note-sharp' size={24} color={color} />,
					tabBarLabel: '歌单'
				}}></Tabs.Screen>
				<Tabs.Screen name="artists" options={{
					title: 'Artists',
					tabBarIcon: ({ color }) => <FontAwesome6 name='users-line' size={20} color={color} />,
					tabBarLabel: '歌手'
				}}></Tabs.Screen>
			</Tabs>
			<FloatingPlayer style={{
					position: 'absolute',
					left: 8,
					right: 8,
					bottom: 78,
				}} />
		</>

	)


}


export default TabsNavigation